<template>
<el-page-header @click="goback">
    <template #content>
      <span class="text-large font-600 mr-3">{{empName}}的绩效详情</span>
    </template>
  </el-page-header>
  <el-card class="role-card">
  <el-steps :space="200" :active="1" finish-status="success" class="step">
    <el-step title="绩效专员发布"></el-step>
    <el-step title="绩效专员申报"></el-step>
  </el-steps>
  <!---->
  <el-tabs tab-position="left" style="margin: 50px 0 0 80px;" class="demo-tabs">
    <el-tab-pane label="计件考核" v-if="WaitList.pieceState==1">
      <PieceForm :update="update" :empId="empId" :positionId="positionId"></PieceForm>
    </el-tab-pane>
    <el-tab-pane label="提成考核" v-if="WaitList.kpiState==1">
      <KpiForm :update="update" :empId="empId" :positionId="positionId"></KpiForm>
    </el-tab-pane>
    <el-tab-pane label="申报完成" v-if="WaitList.pieceState!=1&&WaitList.kpiState!=1&&WaitList.totalState==0">
      <el-result
        icon="success"
        title="已申报"
        sub-title="已申报，请等待审核结果"
      >
      <template #extra>
          <el-button type="primary" @click="goback">下一位</el-button>
        </template>
      </el-result>
    </el-tab-pane>
    <el-tab-pane
      label="绩效考核数据为空"
      v-if="WaitList.pieceState!=1&&WaitList.kpiState!=1&&WaitList.totalState==1">
    <el-empty description="绩效考核数据为空" />
    </el-tab-pane>
  </el-tabs>
  <el-button type="primary" @click="submitForm" class="button" v-if="WaitList.pieceState==1||WaitList.kpiState==1">申报</el-button>
  </el-card>
</template>

<script setup>
import {ref, onMounted,onBeforeMount, reactive,getCurrentInstance} from "vue";
import PieceForm from './components/pieceForm'
import KpiForm from './components/KpiForm'
import {getWageEmpState,updateWageEmpFlow} from "@/api/task"
import {useRoute} from "vue-router";
import { ElMessage } from 'element-plus'

const route = useRoute()

let empId=route.query.empId;
let fourthId=route.query.fourthId;
let thirdId=route.query.thirdId;
let type=route.query.type;
let positionId=route.query.positionId;
let empName=route.query.empName;

const WaitList=ref([])
onBeforeMount(()=>{
    getWageEmpState({empId,positionId})
    .then(data=>{
        WaitList.value=data.data;
    });
})

const submitForm=()=>{
    updateWageEmpFlow({empId,positionId})
    .then((data)=>{
        if(data.code==200){
            WaitList.pieceState=2
            WaitList.kpiState=2
             ElMessage({
                message: "提交成功",
                type: "success",
            });
            proxy.$router.go(-1)
        }
        else{
            ElMessage.error("提交失败");
        }
    })
}

const { proxy } = getCurrentInstance();
const goback=()=>{
  proxy.$router.go(-1)
}

</script>

<style lang="scss" scoped>
.step{
  width: 1000px;
  margin: 20px auto;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}

.button{
  width: 150px;
  margin: 20px 0 20px 205px;
  float: left;
  font-size:18px;
}

.el-card {
  border-radius: 10px;
  margin:20px;
}
</style>